import React from 'react';
import {connect} from 'react-redux';
import {TopWrapper, Top} from '../style'
import {actionCreators} from '../store';

class BackTop extends React.PureComponent {
    render() {
        const {top, handleScrollTop, handleMouseEnter, handleMouseLeave} = this.props;
        return (

            <TopWrapper>
                <Top onClick={handleScrollTop}
                     onMouseEnter={handleMouseEnter}
                     onMouseLeave={handleMouseLeave}>
                    <span className="iconfont">&#xe607;</span>
                </Top>
                <p className={top ? "desc" : "hide"}>回到顶部</p>
            </TopWrapper>
        )
    }
};
const mapState = (state) => ({
    top: state.getIn(['home', 'top'])
});
const mapDispatch = (dispatch) => {
    return {
        handleScrollTop() {
            const scrollToTop = window.setInterval(() => {
                let pos = window.pageYOffset;
                if (pos > 0) {
                    window.scrollTo(0, pos - 20);
                } else {
                    window.clearInterval(scrollToTop);
                }
            }, 1);
            //无动画效果
            // window.scrollTo(0,0);
            /*dispatch(actionCreators.handleBackTop())*/
        },
        handleMouseEnter() {
            dispatch(actionCreators.handleMouseEnter())
        },
        handleMouseLeave() {
            dispatch(actionCreators.handleMouseLeave())
        }
    }
};
export default connect(mapState, mapDispatch)(BackTop);
